<template>
  <div>
    <!-- 评论 -->
    <div id="Comments">
      <h2>评论</h2>
      <hr />
      <!-- 添加评论 -->
      <div class="add_ping">
        <van-cell-group inset @keydown.enter="shangchan">
          <van-field
            v-model="messages"
            rows="2"
            autosize
            label="评论板"
            type="textarea"
            maxlength="20"
            placeholder="回车回复"
            show-word-limit
          />
        </van-cell-group>
      </div>
      <!-- 评论列表 -->
      <template v-if="counts != null">
        <!-- 判断是否有评论 -->
        <template v-if="countss.length <= 0">
          <p
            style="
              margin-top: 0.3rem;
              text-align: center;
              padding-bottom: 0.3rem;
            "
          >
            暂时没有评论
          </p>
        </template>
        <div class="pinglist" v-for="item in countss" :key="item.id">
          <div class="ping_imgs">
            <van-image :src="item.author.avatar_url" />
          </div>
          <div class="ping_content">
            <p>{{ item.author.loginname }}</p>
            <div v-html="item.content"></div>
          </div>
          <div @click="dianzan(item.id)">
            <van-icon
              name="good-job-o"
              :badge="item.ups.length"
              style="top: 10%; transform: translateY(-10%)"
            />
          </div>
        </div>
      </template>
      <template v-if="counts == null">
        <p
          style="margin-top: 0.3rem; text-align: center; padding-bottom: 0.3rem"
        >
          暂无内容
        </p>
      </template>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { Notify } from "vant";
export default {
  name: "detail_ping",
  props: ["counts"],
  data() {
    return {
      messages: "",
      countss: this.counts.replies,
    };
  },
  methods: {
    dianzan(val) {
      if (window.localStorage.getItem("user") == undefined) {
        // this.$router.push({ path: "deng" });
        Notify({
          type: "warning",
          message: "请登录,登录后点赞",
          duration: 2000,
        });
      } else {
        console.log(val);
        if (val) {
          axios
            .post("https://cnodejs.org/api/v1/reply/" + val + "/ups", {
              accesstoken: JSON.parse(window.localStorage.getItem("user")).acc,
            })
            .then((res) => {
              console.log(res.data);
              axios
                .get(
                  "https://cnodejs.org/api/v1/topic/" +
                    this.$route.query.tab +
                    "",
                  {
                    accesstoken: JSON.parse(window.localStorage.getItem("user"))
                      .acc,
                  }
                )
                .then((res) => {
                  console.log(res.data.data.replies);
                  this.countss = res.data.data.replies;
                });
            });
        }
      }
    },
    shangchan() {
      if (window.localStorage.getItem("user") == undefined) {
        // this.$router.push({ path: "deng" });
        Notify({
          type: "warning",
          message: "请登录,登录后评论",
          duration: 2000,
        });
      } else {
        // post /topic/:topic_id/replies
        if (this.messages != "" && this.messages.length >= 2) {
          axios
            .post(
              "https://cnodejs.org/api/v1/topic/" +
                this.$route.query.tab +
                "/replies",
              {
                accesstoken: JSON.parse(window.localStorage.getItem("user"))
                  .acc,
                content: this.messages,
              }
            )
            .then((res) => {
              Notify({
                type: "warning",
                message: "提交成功",
                duration: 2000,
              });
              this.messages = "";
            })
            .catch((err) => {
              console.log(err);
              if (err != "") {
                this.messages = "暂时无法评论";
                Notify({
                  type: "warning",
                  message: "提价失败,次数上限",
                  duration: 2000,
                });
              }
            });
        } else {
          Notify({
            type: "warning",
            message: "请输入内容",
            duration: 2000,
          });
        }
      }
    },
  },
};
</script>
<style lang="sass">
</style>